<template>
    <div class="case-list w1160">
        <ul>
            <li class="outside flex" v-for="item in CaseList" :key="item.id">
                <img class="left-img" :src="$get(item.img)" width="427px" height="540px">
                <div class="right-box">
                    <h2 class="h2 fz22">{{ item.h2 }}</h2>
                    <ul>
                        <li class="inside" v-for="i in item.content" :key="i.id">
                            <h3 class="h3 fz20">{{ i.h3 }}</h3>
                            <p class="des fz14">{{ i.des }}</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'CaseList',
  data () {
    return {
      CaseList: [
        {
          id: 1,
          img: 'case1-finance',
          h2: '金融行业',
          content: [
            { id: 1, h3: '合作对象', des: '中国银联、中国农业银行、中国邮政储蓄银行、中国银行、中国工商银行、交通银行、浦发银行、哈银消费金融公司、51信用卡' },
            { id: 2, h3: '品牌支持', des: '橙金融' },
            { id: 3, h3: '服务内容', des: '橙券为客户搭建营销活动，银行的手机银行及网银用户可通过参与活动，获得不同频次抽奖礼券，凭抽奖礼券随机抽取话费、流量、星巴克等奖品，打造具有生动营销力的传播。' }
          ]
        },
        {
          id: 2,
          img: 'case2-internet',
          h2: '互联网行业',
          content: [
            { id: 1, h3: '合作对象', des: '腾讯、京东PLUS、支付宝、搜狐邮箱、好时巧克力、乐麦' },
            { id: 2, h3: '品牌支持', des: '橙营销' },
            { id: 3, h3: '服务内容', des: '橙券为品牌线上商城旗舰店提供权益商品和技术支撑，多种选择，稳定货源支持，充分调动用户参与积极性，与用户形成良好互动，拉新促销，驱动企业业绩提升。' }
          ]
        },
        {
          id: 3,
          img: 'case3-insurance',
          h2: '保险行业',
          content: [
            { id: 1, h3: '合作对象', des: '中邮人寿、中德安联人寿、壹钱包' },
            { id: 2, h3: '品牌支持', des: '橙营销、橙金融' },
            { id: 3, h3: '服务内容', des: '橙券，为保险行业客户策划精准有冲击力的营销活动，同时兼顾品牌信息传递和用户习惯的完美平衡，创意提供多面值话费、卡券产品等，覆盖更广泛的目标人群，实现流量快速转换。' }
          ]
        },
        {
          id: 4,
          img: 'case4-communication',
          h2: '通信行业',
          content: [
            { id: 1, h3: '合作对象', des: '中国联通' },
            { id: 2, h3: '品牌支持', des: '橙积分' },
            { id: 3, h3: '服务内容', des: '橙券充分整合360°客户视图，为联通的积分商城提供网票网、货拉拉、e袋洗等优质权益商品，并保障源源不断上新。用户在线兑换心仪商品，丰富且实用，有效提升用户个性化体验，充分发挥积分的价值。' }
          ]
        },
        {
          id: 5,
          img: 'case5-car',
          h2: '汽车行业',
          content: [
            { id: 1, h3: '合作对象', des: '重庆长安汽车' },
            { id: 2, h3: '品牌支持', des: '橙积分' },
            { id: 3, h3: '服务内容', des: '橙券，是长安商城积分兑换业务的提供商之一，为商城用户提供中石化加油卡充值与话费充值服务，让用户有了新的兑换选择，有助于用户留存，加强用户对品牌的友好度，快速提升品牌曝光度和流量。' }
          ]
        },
        {
          id: 6,
          img: 'case6-media',
          h2: '传媒行业',
          content: [
            { id: 1, h3: '合作对象', des: '华数传媒、中科数创、瑞安日报、山东广播电视台' },
            { id: 2, h3: '品牌支持', des: '橙营销' },
            { id: 3, h3: '服务内容', des: '橙券助力媒体行业深度营销，以数据产品的复合运用，实现程序化精准营销服务，根据品牌形象定制不同的视觉风格，形成具有互动性的曝光传播，帮助企业实现。' }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.case-list {
    margin-top: 90px;
    .outside {
        padding-bottom: 90px;
    }
}

.right-box {
    margin-left: 100px;
    .inside {
        position: relative;
        margin-bottom: 60px;
        p {
            color: #666;
        }
    }
    .h2 {
        margin-bottom: 50px;
        color: orange;
    }
    .h3::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 3px;
        height: 24px;
        background-color: orange;
    }
    .h3 {
        padding-left: 20px;
        margin-bottom: 10px;
    }
}
</style>
